<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Constrain Draggable - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Constrain Draggable</h2>
	<p>The draggable object can only be moved within its parent container.</p>
	<div style="margin:20px 0;"></div>
	<div id="a" class="easyui-draggable1" data-options="onBeforeDrag:onBeforeDrag,onStopDrag:onStopDrag" style="width:400px;height:400px;background:#fafafa;border:1px solid #ccc;">
		<div id="b" class="easyui-draggable1" data-options="onBeforeDrag:onBeforeDrag,onStopDrag:onStopDrag" style="position:relative;border:1px solid #ccc;width:300px;height:200px">
			<div id="c" class="easyui-draggable1" data-options="onBeforeDrag:onBeforeDrag,onStopDrag:onStopDrag" style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;">
				<div class="easyui-datebox"></div>
			</div>
		</div>
	</div>	
	<div id="a1" class="easyui-draggable11" data-options="onBeforeDrag:onBeforeDrag,onStopDrag:onStopDrag" style="postion:absolute;left:50px;top:50px;width:30px;height:30px;background:#fafafa;border:1px solid #ccc;">
	</div>
	<script>
		$(function(){
			//alert($('.easyui-draggable1').size());
			$('.easyui-draggable1').draggable({
				disabled:false,
				onBeforeDrag:onBeforeDrag,
				onStopDrag:onStopDrag
			});
			$('.easyui-draggable1').resizable({});
		});
		function onBeforeDrag(e){
			var d = e.data;
			$('#ddd').text(d.target.id);
			$(d.target).parents(".easyui-draggable1").draggable({disabled:true});
		}
		function onStopDrag(e){
			var d = e.data;
			$(d.target).parents(".easyui-draggable1").draggable({disabled:false});
			
		}
		function add(){
			var ss = $('<div id="a2" class="easyui-draggable11"  style="postion:absolute;left:50px;top:50px;width:30px;height:30px;background:#fafafa;border:1px solid #ccc;"></div>').appendTo($('#b'));
			ss.draggable({
				disabled:false,
				onBeforeDrag:onBeforeDrag,
				onStopDrag:onStopDrag
			});
		}
	</script>
	
	<button onclick="add()">ssss</button>
	<textarea id="ddd" style="width:300px;height:400px"></textarea>
</body>
</html>